<!-- subpkg_consult/payment/payment.vue -->
<script lang="ts" setup>
  import { createOrderApi, getPreOrderAPI } from '@/api/consultPAI'
  import { getPatientAPI } from '@/api/patientAPI'
  import { useConsultStore } from '@/stores/consult'
  import type { OrderPreData, OrderPreParams } from '@/type/consult'
  import type { PatientItem } from '@/type/patient'
  import { onLoad } from '@dcloudio/uni-app'
  import { ref } from 'vue'

  const orderPreData = ref<OrderPreData>()
  const store = useConsultStore()
  onLoad(async () => {
    let params: OrderPreParams = {} as OrderPreParams
    params.illnessType = store.illnessType
    params.type = store.type
    orderPreData.value = await getPreOrderAPI(params)
  })

  const patientInfo = ref<PatientItem>()
  onLoad(async () => {
    patientInfo.value = await getPatientAPI(store.patientId)
  })
  const paymentPopup = ref()
  const orderId = ref('')
  const goPay = async () => {
    const res = await createOrderApi({
      type: store.type,
      illnessType: store.illnessType,
      patientId: store.patientId,
      depId: store.depId,
      illnessDesc: store.illnessInfo.illnessDesc,
      illnessTime: store.illnessInfo.illnessTime,
      consultFlag: store.illnessInfo.consultFlag,
      pictures: store.illnessInfo.pictures,
    })
    orderId.value = res.id
    store.clear()
    paymentPopup.value?.open()
  }
</script>

<template>
  <scroll-view>
    <view class="payment-page">
      <uni-section
        title-font-size="32rpx"
        title-color="#121826"
        padding="30rpx"
        :title="`图文问诊 ${orderPreData?.payment}元`"
      >
        <uni-list :border="false">
          <uni-list-item
            title="极速问诊"
            note="自动分配医生"
            thumb="/static/uploads/doctor-avatar.jpg"
            thumb-size="lg"
          />
          <uni-list-item
            title="优惠券"
            show-arrow
            :right-text="`-¥${orderPreData?.couponDeduction.toFixed(2)}`"
          />
          <uni-list-item title="积分抵扣">
            <template #footer>
              <view class="uni-list-text-red"
                >-¥{{
                  orderPreData?.couponDeduction ? orderPreData?.couponDeduction : '0.00'
                }}</view
              >
            </template>
          </uni-list-item>
          <uni-list-item title="实付款">
            <template #footer>
              <view class="uni-list-text-red">¥{{ orderPreData?.actualPayment.toFixed(2) }}</view>
            </template>
          </uni-list-item>
        </uni-list>
      </uni-section>

      <view class="dividing-line"></view>

      <uni-section title-font-size="32rpx" title-color="#121826" padding="30rpx" title="患者资料">
        <uni-list :border="false">
          <uni-list-item title="患者信息">
            <template #footer>
              <view class="uni-list-text-gray">
                {{ patientInfo?.name }} | {{ patientInfo?.gender }} | {{ patientInfo?.age }}岁
              </view>
            </template>
          </uni-list-item>
          <uni-list-item border title="病情描述" :note="store.illnessInfo.illnessDesc" />
        </uni-list>
      </uni-section>

      <!-- <view class="payment-agreement">
        <radio color="#20c6b2" value="1" />
        我已同意<text style="color: #20c6b2">支付协议</text>
      </view> -->
    </view>
    <!-- 下一步操作 -->
    <view class="next-step">
      <view class="total-amount"> 合计: <text class="number">¥39.00</text> </view>
      <button class="uni-button" @click="goPay">立即支付</button>
    </view>
    <custom-payment
      :order-id="orderId"
      :amount="orderPreData?.actualPayment ? orderPreData.actualPayment : 0"
      ref="paymentPopup"
    ></custom-payment>
  </scroll-view>
</template>

<style lang="scss">
  @import './payment.scss';
</style>
